// 获取首页数据
async function getData() {
  // 发送请求
  try {
    // 这里只能使用axios-config模式获取
    const res = await axios("/dashboard");
    // console.log(res);
    // 解构首页中所需要的数据
    const {groupData, overview, provinceData, salaryData, year } = res.data;
    // console.log(res.data);
    console.log(groupData);
    // 渲染概览区域
    renderOverview(overview);
    // 渲染薪资表区域
    salaryEhart(year);
    // 渲染班级薪资饼状图
    salarydata(salaryData);
    // 渲染学员分布
    salaryMap(provinceData);
    // 渲染男女薪资比例饼状图
    salaryGender(salaryData);
    // 渲染每组薪资
    // console.log(groupData);
    groupEharts(groupData);
  } catch (e) {
    console.dir(e.response);
  }
}

getData();

// 渲染概览区域
function renderOverview(data) {
  // console.log(data);
  for (const k in data) {
    // console.log(k);
    // 对象的键刚好等于标签name的值
    document.querySelector(`[name=${k}]`).innerHTML = data[k];
  }
}

// 渲染薪资走向表
function salaryEhart(data) {
  // console.log(data);

  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById("line"));

  // 指定图表的配置项和数据
  let option = {
    // 添加标题
    title: {
      text: "2021全学科薪资表",
      // 设置标题样式
      textStyle: {
        color: "black",
        fontSize: 20,
      },
      left: "3%",
      top: "2%",
    },

    //位置设置
    grid: {
      left: "15%",
      top: "15%",
    },
    // 提示组件
    tooltip: {
      trigger: "axis",
      // 坐标轴指示器配置
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "purple",
        },
      },
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.month),
    },
    yAxis: {
      type: "value",
      // 设置虚线
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "#d3d3d3",
        },
      },
    },
    series: [
      {
        data: data.map((item) => item.salary),
        // 表的类型
        type: "line",
        // 是否平滑
        smooth: true,
        // 线的配置
        lineStyle: {
          width: 7,
          color: "#5aaafe",
        },

        // 小圆点大小
        symbolSize: 10,
        itemStyle: {
          color: "#5aaafe",
        },
        areaStyle: {
          // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#5aaafe", // 0% 处的颜色
              },
              {
                offset: 0.7,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],

    // 全局调色盘
    color: ["purple"],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

// 渲染班级薪资饼状图

function salarydata(data) {
  let myChart = echarts.init(document.getElementById("salary"));

  option = {
    title: {
      text: "班级薪资分布图",
      top: "3%",
      left: "2%",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "班级薪资",
        type: "pie",
        radius: ["45%", "60%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: data.map((item) => {
          return {
            value: item.g_count + item.b_count,
            name: item.label,
          };
        }),
      },
    ],
    color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
  };

  myChart.setOption(option);
}

// 渲染学员分布
function salaryMap(data) {
  // console.log(data);
  let myChart = echarts.init(document.getElementById("map"));

  const dataList = [
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 0 },
    { name: "天津", value: 0 },
    { name: "上海", value: 0 },
    { name: "重庆", value: 0 },
    { name: "河北", value: 0 },
    { name: "河南", value: 0 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 0 },
    { name: "黑龙江", value: 0 },
    { name: "湖南", value: 0 },
    { name: "安徽", value: 0 },
    { name: "山东", value: 0 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 0 },
    { name: "浙江", value: 0 },
    { name: "江西", value: 0 },
    { name: "湖北", value: 0 },
    { name: "广西", value: 0 },
    { name: "甘肃", value: 0 },
    { name: "山西", value: 0 },
    { name: "内蒙古", value: 0 },
    { name: "陕西", value: 0 },
    { name: "吉林", value: 0 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 0 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 0 },
    { name: "宁夏", value: 0 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ];

  // 处理数据
  dataList.map((item) => {
    data.find((v) => {
      if (v.name.indexOf(item.name) === 0) {
        item.value = v.value;
      }
    });
  });

  dataList.sort(function (a, b) {
    return b.value - a.value;
  });
  const max = dataList[0].value;

  let option = {
    title: {
      text: "籍贯分布",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} 位学员",
      borderColor: "transparent",
      backgroundColor: "rgba(0,0,0,0.5)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: max + 1,
      left: "left",
      bottom: "20",
      text: [max + 1, "0"],
      inRange: {
        color: ["#ffffff", "#0075F0"],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: "china",
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: "10",
          color: "rgba(0,0,0,0.7)",
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(0, 0, 0, 0.2)",
          color: "#e0ffff",
        },
        emphasis: {
          areaColor: "#34D39A",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
    series: [
      {
        name: "籍贯分布",
        type: "map",
        geoIndex: 0,
        data: dataList,
      },
    ],
  };

  myChart.setOption(option);
}

// 渲染男女薪资比例饼状图
function salaryGender(data) {
  // console.log(data);

  let myChart = echarts.init(document.getElementById("gender"));
  // 先取出男生女生的薪资比例
  let girl = data.map((item) => {
    return {
      name: item.label,
      value: item.g_count,
    };
  });

  let boy = data.map((item) => {
    return {
      name: item.label,
      value: item.b_count,
    };
  });

  let datas = [girl, boy];
  option = {
    // 如果想在title的文字再添加文字，需要包进一个数组然后再text后面填写subtext，对应方法也会改变
    title: [
      {
        text: "男女薪资分布",
        top: "5%",
        left: "10%",
        textStyle: {
          color: "black",
          fontWeight: "700",
          fontSize: 16,
        },
      },
      {
        subtext: "女生",
        left: "50%",
        bottom: "5%",
        textAlign: "center",
        subtextStyle: {
          color: "black",
          fontSize: 15,
          fontWeight: "700",
        },
      },
      {
        subtext: "男生",
        left: "50%",
        top: "40%",
        textAlign: "center",
        subtextStyle: {
          color: "black",
          fontSize: 15,
          fontWeight: "700",
        },
      },
    ],
    series: datas.map(function (data, idx) {
      let top = idx * 45;
      return {
        type: "pie",
        radius: [40, 60],
        top: top + "%",
        height: "50%",
        left: "center",
        width: 400,
        labelLine: {
          length: 20,
          // length2: 0,
          maxSurfaceAngle: 100,
        },
        data: data,
      };
    }),
    color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
  };
  myChart.setOption(option);
}

// 渲染每组薪资
function groupEharts(data) {
  console.log(data);
  // 生成btn 按钮
  const btn = document.querySelector('#btns')
  // 生成一个空数组
  const arr = []
  for (const k in data) {
    arr.push(` <button type="button" class="btn btn-xs ">
    ${k}
    </button>`)
  }
  btn.innerHTML = arr.join('')
  // 默认给第一个btn添加高亮
  btn.children[0].classList.add('btn-blue')

  let myChart = echarts.init(document.getElementById("lines"));

  option = {
    xAxis: {
      type: "category",
      data: data[1].map(item =>item.name),
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "#d3d3d3",
        },
      },
    },
    series: [
      {
        data: data[1].map(item =>item.hope_salary),
        type: "bar",
      },
      {
        data: data[1].map(item =>item.salary),
        type: "bar",
      },
    ],
    color: [
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#3ed59e", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#cff5e7", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#52a3ee", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#d2e7fa", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    ],
  };

  myChart.setOption(option);

  // 点击切换小组数据
  btn.addEventListener('click',(e) =>{
    if (e.target.tagName === 'BUTTON') {
      // 排他思想，处理高光
      document.querySelector("#btns .btn-blue").classList.remove('btn-blue');
      e.target.classList.add('btn-blue');
      // 切换数据
      // 拿到小组号
      const index = e.target.innerHTML.trim()
      // console.log(index);

      // x轴信息
      option.xAxis.data = data[index].map((item) =>item.name)
      option.series[0].data = data[index].map((item) =>item.hope_salary)
      option.series[1].data = data[index].map((item) =>item.salary)

      // 重新设置
      myChart.setOption(option);
    }
  })
}
